<template>
    <el-card>
        <div>
            <div v-for="item in state" :key="item.id">
                <div class="all">
                    <el-checkbox v-model="item.isCheckAll" :indeterminate="item.isIndeterminate"
                        @change="checkAllChange(item)">{{
                            item.name
                        }}</el-checkbox>
                </div>
                <el-checkbox-group v-model="item.checked" @change="groupChange(item)">
                    <el-checkbox v-for="c in item.children" :key="c.id" :label="c.id">{{ c.name }}</el-checkbox>
                </el-checkbox-group>
            </div>
            <div class="flex">
                <el-button>清空</el-button>
                <el-button type="primary" @click="clickHandel">确定</el-button>
            </div>
        </div>
    </el-card>

</template>
<script setup lang='ts'>
import { getResourceListByRoleIdAPI, resourceListAllAPI, resourceCategoryAllAPI, allocResource } from "./api"
import { useRoute } from "vue-router";
import { ref } from "vue"
import { ElMessageBox } from "element-plus";
import { Checked } from "@element-plus/icons-vue";
const route = useRoute()

type IState = IResourceCategoryModel & {
    children: IResourceModel[],
    checked: number[],
    isCheckAll: boolean,
    isIndeterminate: boolean
}

let state = ref<IState[]>([])

// 三个请求都成功之后，才执行then
if (route.query.id) {
    Promise.all([resourceCategoryAllAPI(), resourceListAllAPI(), getResourceListByRoleIdAPI(parseInt(route.query.id as string))]).then((res) => {
        state.value = res[0].data.map(item => ({
            ...item,
            children: [],
            checked: [],
            isCheckAll: false,
            isIndeterminate: false,

        }))
        res[1].data.forEach((resource) => {
            const cate = state.value.find((cate) => cate.id === resource.categoryId)
            cate && cate.children.push(resource)
        })
        res[2].data.forEach(item => {
            const pp = state.value.find((p) => p.id === item.categoryId)
            pp && pp.checked.push(item.id)
        })
        state.value.forEach(pp => {
            // 全选
            pp.isCheckAll = pp.checked.length === pp.children.length
            // 半选
            pp.isIndeterminate = pp.checked.length > 0 && pp.checked.length < pp.children.length
        })
        console.log(state.value);
    }).catch(() => { })

}

const checkAllChange = (data: IState) => {
    if (!data.isCheckAll) {
        data.checked = []
    } else {
        data.checked = data.children.map(item => item.id)
    }
}
const groupChange = (data: IState) => {
    // 全选
    data.isCheckAll = data.checked.length === data.children.length
    // 半选
    data.isIndeterminate = data.checked.length > 0 && data.checked.length < data.children.length
}

const clickHandel = () => {
    ElMessageBox.confirm("是否给该角色添加资源？", "分配资源", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        allocResource({
            roleId: parseInt(route.query.id as string),
            resourceIds: state.value.reduce<number[]>((prev, next) => {
                return prev.concat(next.checked)
            }, [])
        })

    }).catch(() => {

    })
}
</script>
<style lang="less" scoped>
.all {
    padding: 20px;
    background-color: #fff;
}

:deep(.el-checkbox-group) {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    padding: 20px;
}

.flex {
    padding: 20px;
    display: flex;
    justify-content: center;
}
</style>